<p-card header="{{ control('id')?.value ? 'Edit User':'Add User'}}" *ngIf="userForm">
  <form [formGroup]="userForm" (ngSubmit)="onSubmit()">
    <div class="p-fluid p-formgrid grid">
      <div class="p-field col-12 md-5">
        <label for="username">Username</label>
        <input
          id="username"
          type="text"
          formControlName="username"
          pInputText
        />
        <small *ngIf="control('username')?.dirty && control('username')?.errors" class="p-error">
          <div *ngIf="control('username')?.errors?.['required']">
            Username is ['required']
          </div>
        </small>
      </div>
      <div class="p-field col-12 md-5">
        <label>Name</label>
        <input
          type="text"
          formControlName="name"
          pInputText
        />
        <small *ngIf="control('name')?.dirty && control('name')?.errors" class="p-error">
          <div *ngIf="control('name')?.errors?.['required']">Name is ['required']</div>
        </small>
      </div>
      <div class="p-field col-12 md-2">
        <label>Gender</label>
        <p-dropdown [options]="genderOpts"
                    optionLabel="label"
                    optionValue="value"
                    formControlName="gender"
        ></p-dropdown>
        <small *ngIf="control('gender')?.dirty && control('gender')?.errors" class="p-error">
          <div *ngIf="control('gender')?.errors?.['required']">Gender is ['required']</div>
        </small>
      </div>
      <div class="p-field col-12 md-6">
        <label>Phone Number</label>
        <p-inputMask
          mask="999-9999-9999"
          [unmask]="true"
          formControlName="phoneNum">
        </p-inputMask>
        <small *ngIf="control('phoneNum')?.dirty && control('phoneNum')?.errors" class="p-error">
          <div *ngIf="control('phoneNum')?.errors?.['required']">Phone number is ['required']</div>
          <div *ngIf="control('phoneNum')?.errors?.['phoneTypeInvalid']">Phone number is ['Type Invalid']</div>
        </small>
      </div>
      <div class="p-field col-12 md-6">
        <label>Birthday</label>
        <p-calendar formControlName="birthday"></p-calendar>
        <small *ngIf="control('birthday')?.dirty && control('birthday')?.errors" class="p-error">
          <div *ngIf="control('birthday')?.errors?.['required']">Birthday is ['required']</div>
        </small>
      </div>
      <div class="p-field col-12">
        <label>Home Address</label>
        <input
          type="text"
          pInputText
          formControlName="homeAddress"
        />
        <small *ngIf="control('homeAddress')?.dirty && control('homeAddress')?.errors" class="p-error">
          <div *ngIf="control('homeAddress')?.errors?.['required']">Home Address is ['required']</div>
        </small>
      </div>
      <div class="p-field col-12 md-6" *ngIf="!control('id')?.value">
        <label>Password</label>
        <input
          type="password"
          formControlName="password"
          pInputText
        />
        <small *ngIf="control('password')?.dirty && control('password')?.errors" class="p-error">
          <div *ngIf="control('password')?.errors?.['required']">
            Password is ['required']
          </div>
          <div *ngIf="control('password')?.errors?.['minlength']">
            Password must be at least 6 characters
          </div>
        </small>
      </div>
      <div class="p-field-checkbox col-12">
        <p-checkbox
          formControlName="isAdmin"
          [binary]="true"
          id="isAdmin"></p-checkbox>
        <label for="isAdmin" class="ml-2 form-check-label">Admin User</label>
      </div>
      <div class="p-field-checkbox col-12" *ngIf="!control('id')?.value">
        <p-checkbox
          formControlName="acceptTerms"
          [binary]="true"
          id="acceptTerms"
          [ngClass]="{ 'is-invalid': control('acceptTerms')?.dirty && control('acceptTerms')?.errors }"
        ></p-checkbox>
        <label for="acceptTerms" class="ml-2 form-check-label">Accept Terms & Conditions</label>
        <small *ngIf="control('acceptTerms')?.dirty && control('acceptTerms')?.errors" class="p-error">
          Accept Ts & Cs is ['required']
        </small>
      </div>
    </div>
    <div class="flex justify-content-center">
      <button pButton type="submit" class="mr-2"
              [disabled]="userForm.invalid">{{control('id')?.value ? 'Update' : 'Register'}}</button>
    </div>
  </form>
</p-card>
